<template>
	<view class="content">
		<view class="order-detail-top">
			<view class="order-detail-top-left">
				<view class="order-status">
					<image src="../../../../static/images/play-order-time-icon.png"></image>
					<text class="pay-status">{{ detailInfo.OnLinePlayerOrderStatusStr }}</text>
				</view>
				<view>
					订单金额：
					<text>{{ detailInfo.RealAmount | formatMoneyRmbUnit }}</text>
				</view>
			</view>
			<view class="order-detail-top-icon"><image src="../../../../static/images/play-order-wallet-icon.png"></image></view>
		</view>

		<view class="container">
			<view class="order-detail-info">
				<view class="header-img" :style="{ backgroundImage: 'url( ' + detailInfo.CustomerHeadImg + ' )' }"></view>
				<view class="order-detail-info-content">
					<view class="order-detail-info-item server-nick-name ">
						<view class="title">客户昵称</view>
						<view class="order-detail-info-item-content">{{ detailInfo.CustomerName }}</view>
					</view>
					<view class="order-detail-info-item" @click="createPhoneCall">
						<view class="title">客户电话</view>
						<view class="order-detail-info-item-content">{{ detailInfo.CustomerPhone }}</view>
					</view>
					<view class="order-detail-info-item">
						<view class="title">预约游戏</view>
						<view class="order-detail-info-item-content">{{ detailInfo.TagName }}</view>
					</view>
					<view class="order-detail-info-item">
						<view class="title">预约小时</view>
						<view class="order-detail-info-item-content">{{ detailInfo.AppointmentCount }}</view>
					</view>
					<view class="order-detail-info-item">
						<view class="title">预约时间</view>
						<view class="order-detail-info-item-content">{{ detailInfo.AppointmentTime | timeFormat('yyyy-mm-dd hh:mm') }}</view>
					</view>
				</view>
			</view>

			<view class="order-price-info">
				<view class="order-price-info-item">
					<view>教练总额</view>
					<view class="order-price-content">
						<text class="unit">￥</text>
						<text class="money">{{ detailInfo.Fee | moneyFormat(2) }}</text>
					</view>
				</view>
				<view class="order-price-info-item">
					<view>优惠券</view>
					<view class="order-price-content">
						<text class="unit">￥</text>
						<text class="money">{{ detailInfo.CouponAmount | moneyFormat(2) }}</text>
					</view>
				</view>
				<view class="order-price-info-item">
					<view>实付金额</view>
					<view class="order-price-content">
						<text class="unit">￥</text>
						<text class="money">{{ (detailInfo.Fee - detailInfo.CouponAmount) | moneyFormat(2) }}</text>
					</view>
				</view>
			</view>

			<view class="order-detail-card">
				<view class="order-detail-card-item">
					<view>订单编号</view>
					<view class="order-detail-content">{{ detailInfo.OrderNo }}</view>
				</view>
				<view class="order-detail-card-item">
					<view>下单时间</view>
					<view class="order-detail-content">{{ detailInfo.CreateTime }}</view>
				</view>
				<view class="order-detail-card-item">
					<view>买家留言</view>
					<view class="order-detail-content">{{ detailInfo.Remark | initFormatStr }}</view>
				</view>
			</view>
		</view>

		<view class="bottom-view">
			<view
				class="order-btn jiedan-btn  margin-right-20"
				style="margin-left: auto;"
				v-if="detailInfo.OnLinePlayerOrderStatus == 20"
				@click.stop="updateOrderStatus(detailInfo.Id, 30)"
			>
				接单
			</view>
			<view class="order-btn judan-btn  margin-right-20" v-if="detailInfo.OnLinePlayerOrderStatus == 20" @click.stop="updateOrderStatus(detailInfo.Id, -20)">拒单</view>
			<view
				class="order-btn jiedan-btn  margin-right-20"
				style="margin-left: auto;"
				v-if="detailInfo.OnLinePlayerOrderStatus == 30"
				@click.stop="updateOrderStatus(detailInfo.Id, 40)"
			>
				开始服务
			</view>
			<view
				class="order-btn judan-btn  margin-right-20"
				style="margin-left: auto;"
				v-if="detailInfo.OnLinePlayerOrderStatus == 40"
				@click.stop="updateOrderStatus(detailInfo.Id, 50)"
			>
				结束服务
			</view>
		</view>
	</view>
</template>

<script>
import { updateOnlinePlayerOrderStatus, getOnlinePlayerOrderDetailInfo } from '@/constant/onlineServe.js';
import { createPhoneCall } from '@/config/utils.js';
export default {
	data() {
		return {
			detailInfo: {
				CustomerHeadImg: ''
			},
			orderId: ''
		};
	},
	created() {},
	onLoad(options) {
		if (options.orderId) {
			this.orderId = options.orderId;
			this.getOrderDetail();
		}
	},
	methods: {
		async getOrderDetail() {
			let result = await getOnlinePlayerOrderDetailInfo({ orderId: this.orderId });
			this.detailInfo = result;
		},
		createPhoneCall() {
			createPhoneCall(this.detailInfo.CustomerPhone);
		},
		async updateOrderStatus(orderId, orderStatus) {
			await updateOnlinePlayerOrderStatus({
				orderId: orderId,
				onLinePlayerOrderStatus: orderStatus
			});
			let show_message = '';
			switch (orderStatus) {
				case 30:
					show_message = '接单成功';
					break;
				case 40:
					show_message = '开始服务';
					break;
				case 50:
					show_message = '服务结束';
					break;
				case -20:
					show_message = '拒单成功';
					break;
			}
			uni.showToast({
				title: show_message,
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: './list'
				});
			}, 1000);
		}
	}
};
</script>
<style>
@import url('@/css/common.css');
</style>
<style lang="scss">
.content {
	background-color: $main-page-color;
	height: 100vh;
	overflow-y: auto;
	font-size: $main-text-size-28;
	font-family: 'SourceHanSansCN-Regular';
	color: $main-text-color-gray-33;
}

.order-detail-top {
	height: 240rpx;
	background: linear-gradient(to bottom, #ffd6b2, #f5f5f5);
	position: relative;
	padding-top: 30rpx;
	padding-left: 70rpx;

	&-left {
		font-size: $main-text-size-32;
		.order-status {
			font-family: 'SourceHanSansCN-Medium';
			color: $main-text-color-main-orange;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}
	}

	&-icon {
		position: absolute;
		width: 146rpx;
		height: 126rpx;
		right: 126rpx;
		top: 16rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.container {
	padding: 0 30rpx;
}

.order-detail-info {
	border-radius: 16rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	margin-top: -86rpx;
	min-height: 200rpx;
	position: relative;
	padding: 40rpx 30rpx;
	display: flex;
	.header-img {
		width: 160rpx;
		height: 160rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 16rpx;
		margin-right: 20rpx;
	}

	.order-detail-info-content {
		width: calc(100% - 180rpx);

		.order-detail-info-item {
			margin-bottom: 10rpx;
			display: flex;
			.title {
				width: 140rpx;
				min-width: 140rpx;
				color: $main-text-color-gray-black;
			}
			&-content {
				width: 100%;
				word-wrap: break-word;
			}
		}
		.server-nick-name {
			font-family: 'SourceHanSansCN-Medium';
		}
	}
}

.order-detail-info-content .order-detail-info-item .title::after {
	content: '：';
}

.order-price-info {
	border-radius: 16rpx;
	background-color: #ffffff;
	padding: 10rpx 30rpx;
	margin-bottom: 20rpx;
	&-item {
		display: flex;
		padding: 30rpx 0;
		justify-content: space-between;
		border-bottom: 2rpx solid $main-line-color;
	}
}

.order-price-info-item:last-child {
	border-bottom: unset;
}

.order-price-content {
	color: $main-text-color-main-orange;
	.unit {
		font-size: $main-text-size-20;
	}
	.money {
		font-size: $main-text-size-32;
		font-family: 'SourceHanSansCN-Medium';
	}
}

.order-detail-card {
	border-radius: 16rpx;
	background-color: #ffffff;
	padding: 10rpx 30rpx;
	margin-bottom: 20rpx;

	&-item {
		display: flex;
		padding: 30rpx 0;
		justify-content: space-between;
		border-bottom: 2rpx solid $main-line-color;

		.order-detail-content {
			width: 470rpx;
			text-align: right;
		}
	}
}

.bottom-view:empty {
	display: none;
}

.order-detail-card-item:last-child {
	border-bottom: unset;
}

.evaluate-order {
	padding: 20rpx;

	.remark-container {
		border: 2rpx solid #f5f6fd;
	}

	.remark {
		margin-left: 20rpx;
		margin-top: 20rpx;
		height: 180rpx;
		width: 90%;
		font-size: 28rpx;
	}
}
</style>
